<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> 球动画 动态画圆 </title>
</head>
<style type="text/css">
	.box1 {
		position: relative;
		width: 400px;
		height: 300px;
		margin: 30px auto;
		border: 1px solid #ccc;
	}
	.box1 .ball{
		position: absolute;
		top: 0;
		left: 50%;
		z-index: 1;
		width: 140px;
		height: 140px;
		border-radius: 50%;
		margin-left: -70px;
		animation: jump 1s ease-in-out infinite;
		background: linear-gradient(top, #fff, #999);
		box-shadow: inset 0 0 30px #999, inset 0 -15px 70px #999;
	}
	.box1 .ball:after{
		position: absolute;
		top: 10px;
		left: 50%;
		content: " ";
		display: block;
		width: 70px;
		height: 30px;
		border-radius: 50%;
		margin-left: -35px;
		background: linear-gradient(#fff , #ccc);
	}
	/* 影子 */
	.shadow {
		position: absolute;
		left: 50%;
		bottom: 0;
		width: 80px;
		height: 60px;
		margin-left: -40px;
		border-radius: 50%;
		transform: scaleY(.3);
		animation: shrink 1s infinite;
		background: rgba(20, 20, 20, .1);
		box-shadow: 0 0 25px 20px rgba(20, 20, 20, .1);
	}
	@keyframes jump{
		0% {
			top: 0;
			animation-timing-function: ease-in;
		}
		65% {
			top: 160px;
			height: 140px;
		}
		75% {
			height: 120px;
		}
		100% {
			top: 0;
			height: 140px;
		}
	}
	@keyframes shrink{
		0% {
			width: 90px;
			height: 60px;
			animation-timing-function: ease-in;
		}
		65% {
			width: 10px;
			height: 5px;
			margin-left: -5px;
			background:rgba(20, 20, 20, .3);
			box-shadow: 0 0 25px 20px rgba(20, 20, 20, .3);
		}
		100% {
			width: 90px;
			height: 60px;
			background: rgba(20, 20, 20, .1);
			box-shadow: 0 0 25px 20px rgba(20, 20, 20, .1);
		}
	}
	/* box */
	.box{
		width: 100px;
		height: 100px;
		margin: 50px auto;
		background-color: #f00;
	}
	.box:hover{
		animation: hover 1s ease-in infinite;
		/* animation-name:hover;
		animation-duration:1s;
		animation-timing-function:ease-in;
		animation-iteration-count:infinite; */
	}
	@keyframes hover{
		0% {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			}
		50% {
			width: 200px;
			height: 200px;
			border-radius: 50%;
			}
		100% {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			}
	}
	/* 动态画圆 */
	.canvas {
		position: relative;
		width: 400px;
		height: 400px;
		margin: 50px auto;
		background: #111;
	}

	.draw-circle {
		position: absolute;
		width: 10px;
		height: 10px;
		background: red;
	}
	/* 彩色动态画圆 */
	.circle-one, .circle-two {
		position: absolute;
		top: 0;
		left: 0;
		width: 15px;
		height: 15px;
		background: green;
	}
</style>
<body>

	<p draggable="true">拖拽测试</p>
	<div class="box1">
		<div class="ball"></div>
		<div class="shadow"></div>
	</div>
	
	<div class="box"></div>

	<!-- 动态画圆 -->
	<div id="canvas" class="canvas">
		<div id="drawCircle" class="draw-circle"></div>
	</div>

	<!-- 彩色动态画圆 -->
	<div id="colorCanvas" class="canvas">
		<div id="circleOne" class="circle-one"></div>
		<div id="circleTwo" class="circle-two"></div>
	</div>

<script>
	// 1° = 1
	// Math.sin(弧度制)
	// 180° = π = 3.1415926 == Math.PI

	window.onload = function(){
		// 红色动态画圈
		let angle = 0;
		let speed = 0.05;
		const arr = [];
		const circleDom = document.getElementById("drawCircle");

		// 彩色动态画圆
		const arr1  = [];
		const arr2  = [];
		let colorAngle = 0;	
		const colorSpeed = changeAngle(3); // 每走一次的弧度
		const circleOneDom = document.getElementById("circleOne");
		const circleTwoDom = document.getElementById("circleTwo");

		function draw(){
			const solidX = 200 + Math.sin(angle) * 200;
			const solidY = 200 + Math.cos(angle) * 200;
			angle += speed;

			circleDom.style.top = solidX + "px";
			circleDom.style.left = solidY + "px";

			// 彩色区域
			const oneL = 200 + Math.cos(colorAngle) * 200; // 1 0 -1 0
			const oneT = 200 + Math.sin(colorAngle) * 200; // 0 1  0 -1

			const twoL = 200 + Math.sin(colorAngle) * 200; // 1 0 -1 0
			const twoT = 200 + Math.cos(colorAngle) * 200; // 0 1  0 -1

			colorAngle = colorAngle + colorSpeed;

			circleOneDom.style.top = oneT + "px";
			circleOneDom.style.left = oneL + "px";
			circleOneDom.style.background = getRgb16();

			circleTwoDom.style.top = twoT + "px";
			circleTwoDom.style.left = twoL + "px";
			circleTwoDom.style.background = getRgb16();
			

			tailFn("canvas", arr, circleDom, 100, "red");
			tailFn("colorCanvas", arr1, circleOneDom, 30, "");
			tailFn("colorCanvas", arr2, circleTwoDom, 30, "");
		}

		setInterval(() => {
			draw()
		}, 30);


		function rangeRandom(start,end){
			return Math.floor(Math.random()*(end-start+1)+start);
		}

		
	}
	/**
     *@Description id承载当前动画的画布、 arrDom 承载创建的dom、dom当前节点、num节点最大数量、color点的颜色
     *@Return 创建原点函数.
    **/
	const tailFn = (id, arrDom, dom, num, color) => {
		const createDiv = document.createElement("div");

		createDiv.style.width ="4px";
		createDiv.style.height = "4px";
		createDiv.style.position = "absolute";
		createDiv.style.background = color || getRgb16();
		createDiv.style.top = dom.offsetTop + "px";
		createDiv.style.left = dom.offsetLeft + "px";

		arrDom.push(createDiv);
		document.getElementById(id).appendChild(createDiv);

		if(arrDom.length > num){
			document.getElementById(id).removeChild(arrDom.shift());
		}
	}
	/**
     *@Description  0-255 
     *@Return 随机各种颜色.
    **/
	const getRgb16 = () => {
		let rgbR = randomInitial(256).toString(16);
		let rgbG = randomInitial(256).toString(16);
		let rgbB = randomInitial(256).toString(16);

		if(rgbR.length < 2) rgbR = rgbR + "" + rgbR;

		if(rgbG.length < 2) rgbG = rgbG + "" + rgbG;

		if(rgbB.length < 2) rgbB = rgbB + "" + rgbB;

		return "#" + rgbR + rgbG  + rgbB;
	}
	/**
	 *@Description
	 *@Return 随机数.
    **/
	const randomInitial = (start) => {
		return Math.floor(Math.random() * start);
	}
	/**
	 *@Description angle - 角度
	 *@Return 每走一次的弧度.
    **/
	const changeAngle = angle => angle * Math.PI / 180
</script>
</body>
</html>